<template>
  <el-popover
    popper-class="menuPopover"
    placement="bottom-end"
    width="124"
    trigger="hover"
    visible-arrow
    style="position: fixed; top: 0; right: 0; padding: 0 !important; z-index: 7;"
  >
    <div class="menu-box">
      <div
        class="menu-item"
        v-for="(item, index) in filteredMenuBoxList"
        :key="index"
        @click="handleTableClick(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div
      id="mine"
      class="mine"
      slot="reference"
      @click.stop="handleMine()"
    >
      <span>我的</span>
      <img
        class="avator"
        src="https://img3.job1001.com/data_center/mine/avator.png"
        alt=""
      />
      <i class="el-icon-arrow-right"></i>
    </div>
  </el-popover>
</template>

<script>
import { SaaSUserLogout } from "@/api/SaaS";

export default {
  name: "mineAvatar",
  props: {
    isMine: {
      type: Boolean,
      default: false,
    },
  },
  data() {  
    return {
      menuBoxList: [
        { name: "个人中心", value: "mine" },
        { name: "管理后台", value: "operation" },
        { name: "退出登录", value: "loginOut" },
      ],
      roleType: "10", // 10代表学生，20代表老师
    };
  },
  computed: {
    filteredMenuBoxList() {
      if (this.roleType === "20" && this.isMine) {
        return this.menuBoxList.slice(1); // 删除第一个
      } 
       if (this.roleType === "10") {
        return this.menuBoxList.filter((item) => item.value!== "operation");
      }
      return this.menuBoxList;
    },
  },
  mounted() {
    this.roleType = localStorage.getItem("roleType") || "10";
  },
  methods: {
    handleMine() {
      this.$router.push({
        path: "/mine",
        query: this.$route.query,
      });
    },
    handleTableClick(item) {
      if (item.value === "mine") {
        this.$bus.$emit("generalReportAction", {
          etId: localStorage.getItem("roleType") == 20 ? 40001 : 40014,
          personId: localStorage.getItem("personId"),
          cardType: localStorage.getItem("cardType"),
          jumpSource: 60,
          sourceType: 60,
        });
        this.handleMine();
      } else if (item.value === "operation") {
        this.handleOperation();
      } else if (item.value === "loginOut") {
        this.confirmLogout();
      }
    },
    handleOperation() {
      const extraString = localStorage.getItem("extra");
      if (!extraString) return this.$message.error("暂未开通职途管理后台");

      let extra = JSON.parse(extraString);
      if (!extra.AppKey) return this.$message.error("暂未开通职途管理后台");

      this.$bus.$emit("generalReportAction", {
        etId: 40002,
        personId: localStorage.getItem("personId"),
        cardType: localStorage.getItem("cardType"),
        jumpSource: 60,
        sourceType: 60,
      });

      const AppKey = extra.AppKey;
      const url = `${window.location.origin}/crvoCampus/#/userProcessDataManage`;
      const query = `?AppKey=${AppKey}&SecretKey=${this.$route.query.SecretKey || localStorage.getItem("SecretKey")}`;
      if (window.location.origin.includes("com1001.com")) {
        window.open(url + query, "_blank");
      } else {
        this.$message.error("暂未开通职途管理后台");
      }
    },
    confirmLogout() {
      this.$confirm("您确定要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.getItem("roleType") == 10 ? this.studentLogout() : this.logout();
      });
    },
    studentLogout() {
      this.$message.success("退出成功");
      ["userInfo", "token", "SaaStoken", "mobile", "personId"].forEach(item => localStorage.removeItem(item));
      setTimeout(() => {
        this.$router.push({ name: "login", query: { SecretKey: localStorage.getItem("SecretKey") } });
      }, 1000);
    },
    async logout() {
      const res = await SaaSUserLogout();
      if (res.code === 200) {
        this.$message.success(res.status_desc);
        ["userInfo", "token", "SaaStoken", "mobile", "personId"].forEach(item => localStorage.removeItem(item));
        const url = process.env.NODE_ENV === "development" 
          ? "https://test.com1001.com/admin/#/login" 
          : "https://www.com1001.com/admin/#/login";
        window.location.href = url;
      } else {
        this.$message.error(res.status_desc);
      }
    },
  },
};
</script>

<style lang="scss">
.menuPopover {
  width: 124px !important;
  padding: 0px !important;
  border: 0 !important;
  .menu-box {
    .menu-item {
      position: relative;
      padding: 0 14px;
      width: 124px;
      height: 45px;
      background-color: #ffffff;
      color: #333333;
      line-height: 44px;
      cursor: pointer;
      &:hover {
        color: #4880ff;
        background-color: #f5f5f5;
      }
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 1px;
        background-color: #cfd8f5;
      }
      &:last-child::after {
        content: none;
      }
    }
  }
}
.mine {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 20px 20px 10px 0;
  .avator {
    height: 24px;
    width: 24px;
    margin: 0 4px;
    border-radius: 50%;
  }
}
</style>
